/**
 * Created by hao.cheng on 2017/4/16.
 */
import React from 'react';
import { Form, Icon, Input, Button } from 'antd';
import md5 from 'md5'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchData, receiveData } from '@/action';
import http from '../../axios';

const FormItem = Form.Item;

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
  }
  componentWillMount() {
    const { receiveData } = this.props;
    receiveData(null, 'auth');
  }
  componentWillReceiveProps(nextProps) {
    const { auth: nextAuth = {} } = nextProps;
    const { history } = this.props;
    if (nextAuth.data && nextAuth.data.uid) {   // 判断是否登陆
      localStorage.setItem('user', JSON.stringify(nextAuth.data));
      history.push('/');
    }
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { userName, password } = values;
        this.setState({
          loading: true
        })
        http.account.login({
          username: userName,
          password: md5(password).toLocaleUpperCase()
        }).then((r) => {
          localStorage.setItem('user', JSON.stringify(r));
          this.props.history.push('/');
        }).catch(() => {
          this.setState({
            loading: false
          })
        })
      }
    });
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const { loading } = this.state;
    return (
      <div className="login">
        <div className="login-form" >
          <div className="login-logo">
            <span>私人工作台</span>
          </div>
          <Form onSubmit={this.handleSubmit} style={{ maxWidth: '300px', height: '310px' }}>
            <FormItem>
              {getFieldDecorator('userName', {
                rules: [{ required: true, message: '请输入用户名!' }],
              })(
                <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="请输入用户名" />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('password', {
                rules: [{ required: true, message: '请输入密码!' }],
              })(
                <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="请输入密码" />
              )}
            </FormItem>
            <FormItem style={{ marginBottom: 0 }}>
              <Button loading={loading} type="primary" htmlType="submit" className="login-form-button" style={{ width: '100%' }}>登录</Button>
            </FormItem>
          </Form>
        </div>
      </div>

    );
  }
}

const mapStateToPorps = state => {
  const { auth } = state.httpData;
  return { auth };
};
const mapDispatchToProps = dispatch => ({
  fetchData: bindActionCreators(fetchData, dispatch),
  receiveData: bindActionCreators(receiveData, dispatch)
});


export default connect(mapStateToPorps, mapDispatchToProps)(Form.create()(Login));